import React, {PropTypes} from 'react'
import {Form, Input, Button, Icon, Row, Checkbox, Col, notification} from 'antd'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {login, fetchProfile} from '../../actions/system'
const FormItem = Form.Item;
import {browserHistory} from 'react-router'

import './index.less'

const propTypes = {
    user: PropTypes.object,
    loggingIn: PropTypes.bool,
    loginErrors: PropTypes.string
};

const contextTypes = {
    router: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
};

class Login extends React.Component {

    constructor(props) {
        super(props)
    }

    componentWillMount() {
        if (this.props.user) {
            this.context.router.replace('/');
        }
    }

    componentWillReceiveProps(nextProps) {
        const error = nextProps.loginErrors;
        const isLoggingIn = nextProps.loggingIn;
        const user = nextProps.user;
        if (error != this.props.loginErrors && error) {
            notification.error({
                message: 'Login Fail',
                description: error
            });
        }
        if (!isLoggingIn && !error && user) {
            // notification.success({
            //     message: 'Login Success',
            //     description: 'Welcome ' + user
            // });
        }
        if (user) {
            if(this.context.router.location.query){
                browserHistory.push(this.context.router.location.query.redirect);
            }else{
                browserHistory.push("/");
            }
        }
    }

    handleSubmit(e) {
        e.preventDefault();
        const data = this.props.form.getFieldsValue();
        this.props.login(data.user, data.password)
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <Row className="login-row" type="flex" justify="space-around" align="middle">
                    <Col span="6" id="components-form-demo-normal-login">
                        <Form onSubmit={this.handleSubmit.bind(this)} className="login-form">
                            <FormItem>
                                {getFieldDecorator('user', {
                                    rules: [{required: true, message: 'Please input your username!'}],
                                })(
                                    <Input addonBefore={<Icon type="user"/>} placeholder="Username"/>
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{required: true, message: 'Please input your Password!'}],
                                })(
                                    <Input addonBefore={<Icon type="lock"/>} type="password" placeholder="Password"/>
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>Remember me</Checkbox>
                                )}
                                <a className="login-form-forgot">Forgot password</a>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    Log in
                                </Button>

                            </FormItem>
                        </Form>
                    </Col>
                </Row>

            </div>

        )
    }
}

Login.contextTypes = contextTypes;

Login.propTypes = propTypes;

Login = Form.create()(Login);

function mapStateToProps(state) {
    const {system} = state;
    if (system.user) {
        return {user: system.user, loggingIn: system.loggingIn, loginErrors: ''};
    }
    return {user: null, loggingIn: system.loggingIn, loginErrors: system.loginErrors};
}

function mapDispatchToProps(dispatch) {
    return {
        login: bindActionCreators(login, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)
